<template>
  <div>
    <!--  header  -->
    <el-row style="box-sizing: border-box; padding: 0px 20px 0px 20px">
      <el-col>
        <el-card style="overflow: auto;">
          <h1 style="display: inline-block">我的购物车</h1>
        </el-card>
      </el-col>
    </el-row>

    <!-- 购物车商品信息 -->
    <el-row style="box-sizing: border-box; padding: 0px 20px 0px 20px">
      <el-col>
        <el-card style="height: 710px; overflow: auto">
          <el-card shadow="hover" style="margin: 2px 0; display: flex; flex-direction: row; overflow: auto"
                   v-for="(shoppingCartInfo, shoppingCartInfoIndex) of shoppingCartInfos" :key="shoppingCartInfoIndex">
            <div style=" display: flex;width: 80vw">

              <div style="line-height: 250px;margin-right: 50px;">
                <input type="checkbox" v-model="shoppingCartInfo.checkStatus"  @click="shoppingCartInfo.checkStatus = !shoppingCartInfo.checkStatus">
              </div>

              <div style="flex: 3">
                <img :src="shoppingCartInfo.goodsImg" style="height: 250px; width: 100%; cursor: pointer" alt="图片" title="点击查看商品详情！" @click="goToBuyGoods(shoppingCartInfo)">
              </div>

              <div style="flex: 8; padding-left: 100px">
                <p class="goodsname">{{ shoppingCartInfo.goodsname }}</p>
                <p class="goodsInfo">类型 ：{{ shoppingCartInfo.goodstype }}</p>
                <p  class="goodsInfo">单价 ：{{ shoppingCartInfo.goodsprice }} ￥</p>
                <div>
                  <el-input-number v-model="shoppingCartInfo.goodsNum" :min="1" label="描述文字"
                                   style="margin-bottom:10px"></el-input-number>
                  <span style="font-weight: bolder; font-size: 20px; margin-left: 10px">
                    件
                  </span>
                </div>
                <p class="price"> 总价格 {{ (shoppingCartInfo.goodsprice * shoppingCartInfo.goodsNum).toFixed(2) }} ￥</p>
              </div>

              <div style="flex: 1;display: flex; justify-content: center; align-items: center">
                <button class="btn" style="margin-right: 20px" @click="removeShoppingCar(shoppingCartInfo)">
                  <span class="btn-text-one">移出购物车</span>
                  <span class="btn-text-two "><i class="el-icon-delete"></i></span>
                </button>
              </div>
            </div>
          </el-card>
        </el-card>
      </el-col>
    </el-row>

    <!--    -->
    <el-row style="margin: 0px 20px;">
      <el-card>
        <div style="display: flex; justify-content: space-between;">
          <div>
            <button style="margin-left: 10px" @click="TFallSelect">
              <span class="shadow"></span>
              <span class="edge"></span>
              <span class="front text">全选</span>
            </button>
            <button  style="margin-left: 10px">
              <span class="shadow"></span>
              <span class="edge"></span>
              <span class="front text">结算</span>
            </button>
            <span class="price" style="margin-left: 10px;font-size: 30px; color: red">{{SettleBill}} ￥</span>
          </div>
          <div>
            <button style="margin-left: 10px" @click="Deletes">
              <span class="shadow"></span>
              <span class="edge"></span>
              <span class="front text">批量移除</span>
            </button>
          </div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Request from "@/Network/axios";
import {Message} from "element-ui";

export default {
  name: "shoppingCart",

  data() {
    return {
      shoppingCartInfos: [],
      sumPrice: null,
    }
  },

  computed: {
    SettleBill(){
      let sum = 0
      this.shoppingCartInfos.forEach(item => {
        if (item.checkStatus){
          sum = sum + item.goodsprice * item.goodsNum
        }
      })
      return sum.toFixed(2)
    }
  },

  methods: {

    // 去到商品详情页面
    goToBuyGoods(goodsInfo){
      this.$router.push({
        name: 'buyGoods',
        query: {
          data: JSON.stringify(goodsInfo)
        }
      })
      console.log(goodsInfo)
    },

    // 移出购物车
    removeShoppingCar(goodsInfo){



      Request({
        url: '/user/removeGoodsShoppingCart',
        method: 'post',
        data: {
          mygoodsId: goodsInfo.mygoodsId
        }
      }).then(res => {
        if (res.data.status >= 400){
          return Message({
            type: 'warning' ,
            message: res.data.message
          })
        }

        for (let i = 0; i < this.shoppingCartInfos.length; i++){
          if (this.shoppingCartInfos[i].mygoodsId === goodsInfo.mygoodsId){
            this.shoppingCartInfos.splice(i, 1)
          }
        }

        Message({
          type: 'success' ,
          message: res.data.message
        })
      }).catch(err => {
        console.log(err)
      })
    },

    // 批量移除
    Deletes(){

      let mygoodsIdsArr = []

      this.shoppingCartInfos.forEach(item => {
        if (item.checkStatus === true){
          mygoodsIdsArr.push(item.mygoodsId)
        }
      })

      Request({
        url: '/user/removeGoodssShoppingCart',
        method: 'post',
        data: {
          mygoodsIds: mygoodsIdsArr
        }
      }).then(res => {
        if (res.data.status >= 400){
          return Message({
            type: 'warning' ,
            message: res.data.message
          })
        }

        for (let i = 0; i < this.shoppingCartInfos.length; i++){
          for (let j = 0; j < mygoodsIdsArr.length; j++){
            if (this.shoppingCartInfos[i].mygoodsId === mygoodsIdsArr[j]){
              this.shoppingCartInfos.splice(i, 1)
            }
          }
        }

        Message({
          type: 'success' ,
          message: res.data.message
        })
      }).catch(err => {
        console.log(err)
      })
    },

    // 是否全选
    TFallSelect(){
      this.shoppingCartInfos.forEach(item => {
        item.checkStatus = true
      })
    }

  },

  mounted() {
    // 获取购物车的信息
    Request({
      url: '/getShoppingCartInfo',
      method: 'post',
      data: {
        username: localStorage.getItem('username')
      },
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      }
    }).then(res => {
      res.data.data.forEach(item => {
        item.checkStatus = false
      })
      this.shoppingCartInfos = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

.goodsname {
  font-weight: 800;
  text-transform: uppercase;
  color: #494454;
  margin-top: 10px;
  font-size: 25px;
  letter-spacing: 1px;
}

.goodsInfo {
  color: #D4D0DC;
  font-size: 14px;
  margin: 20px 0;
}

.price {
  color: red;
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
}

/*  */
.btn {
  width: 140px;
  height: 50px;
  background: linear-gradient(to top, #00154c, #12376e, #23487f);
  color: #fff;
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.btn span {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: top 0.5s;
}

.btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}

.btn:hover .btn-text-one {
  top: -100%;
}

.btn:hover .btn-text-two {
  top: 50%;
}

/*  */

button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%
  );
}

.front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

button:hover {
  filter: brightness(110%);
}

button:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

button:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

button:focus:not(:focus-visible) {
  outline: none;
}

</style>